<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>



<html>
<head>
    <title>用户数据</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script >
        //判断用户是否确认删除
        function deleteUser(id) {
            let flag = confirm("确定要删除用户吗？");
            if (flag) {
                //执行删除操作
                window.location.href = 'UserServlet?type=delete&id=' + id;
            }
        }

        //重置功能
        function $reset() {
            location.href = "UserServlet?type=getList";
        }

        //返回上一页
        function $goBack() {
            location.href = 'index.jsp';
        }

        //搜索功能
        function $search() {
            //获取搜索框和下拉框的对象
            let inputSelect = document.getElementById("inputSelect");
            let option = document.getElementById("option");
            //发送请求
            window.location.href = 'UserServlet?type=search&inputSelect=' + inputSelect.value + '&option=' + option.value;

        }

        //删除选中
        function $deleteChecked() {
            //获取所有勾选框的对象
            let singles = document.getElementsByClassName("single");
            //遍历所有的勾选对象
            let requestUti = "UserServlet?type=deleteChecked";
            for (let i = 0; i < singles.length; i++) {
                if (singles[i].checked) {
                    requestUti += "&id=" + singles[i].name;
                }
            }
            //发送请求
            window.location.href = requestUti;
        }


        //6.编辑功能
        onload = function () {
            //1.通过类名来获取所有标签对象
            let edits = document.getElementsByClassName("edit-btn");
            //2.遍历所有的编辑超链接对象
            for (let index in edits) {
                edits[index].onclick = function () {
                    let id = edits[index].id;
                    //3.获取父标签的上一个对象()籍贯nativePlace
                    let nativePlace = this.parentElement.previousElementSibling;
                    //4.获取籍贯的上一级标签对象(爱好)
                    let hobbiesStr = nativePlace.previousElementSibling;
                    //5.获取爱好的上一级标签对象(性别)
                    let sex = hobbiesStr.previousElementSibling;
                    //6.获取性别的上一级标签对象(密码)
                    let password = sex.previousElementSibling;
                    //7.获取密码的上一级标签对象(用户名)
                    let username = password.previousElementSibling;
                    //8.判断当前操作是否为编辑操作
                    if ("编辑" === this.innerText) {
                        //9.修改td的内容
                        nativePlace.innerHTML = "<input type='text' value='" + nativePlace.innerHTML + "' style='width: 80px;height: 45px'>"
                        hobbiesStr.innerHTML = "<input type='text' value='" + hobbiesStr.innerHTML + "'style='width: 80px;height: 45px'>"
                        sex.innerHTML = "<input type='text' value='" + sex.innerHTML + "' style='width: 80px;height: 45px'>"
                        password.innerHTML = "<input type='text' value='" + password.innerHTML + "' style='width: 80px;height: 45px'>"
                        username.innerHTML = "<input type='text' value='" + username.innerHTML + "' style='width: 80px;height: 45px'>"
                        this.innerText = "完成"
                    } else {
                        //10.获取td的input标签
                        let nativePlaceInput = nativePlace.childNodes[0];
                        let hobbiesStrInput = hobbiesStr.childNodes[0];
                        let sexInput = sex.childNodes[0];
                        let passwordInput = password.childNodes[0];
                        let usernameInput = username.childNodes[0];
                        //把input标签的value属性覆盖父标签的内容
                        nativePlace.innerHTML = nativePlaceInput.value;
                        hobbiesStr.innerHTML = hobbiesStrInput.value;
                        sex.innerHTML = sexInput.value;
                        password.innerHTML = passwordInput.value;
                        username.innerHTML = usernameInput.value;
                        this.innerText = "编辑"
                        //发送请求
                        location.href = "UserServlet?type=Editor&id=" + id + "&username=" + usernameInput.value + "&password=" + passwordInput.value
                            + "&sex=" + sexInput.value + "&hobbiesStr=" + hobbiesStrInput.value + "&nativePlace=" + nativePlaceInput.value + "&x=1";
                    }
                }
            }
        }

        // 全选
        function selectAll() {
            let singles = document.getElementsByClassName("single"); // 获取所有class为"single"的元素
            uncheckOtherCheckboxes(); // 调用取消其他复选框选中状态的函数
            for (let single of singles) { // 遍历所有class为"single"的元素
                single.checked = true; // 将当前元素设置为选中状态
            }
        }

        // 全不选
        function selectNo() {
            let singles = document.getElementsByClassName("single"); // 获取所有class为"single"的元素
            uncheckOtherCheckboxes(); // 调用取消其他复选框选中状态的函数
            for (let single of singles) { // 遍历所有class为"single"的元素
                single.checked = false; // 将当前元素设置为未选中状态
            }
        }

        // 反选
        function invertSelect() {
            let singles = document.getElementsByClassName("single"); // 获取所有class为"single"的元素
            uncheckOtherCheckboxes(); // 调用取消其他复选框选中状态的函数
            for (let single of singles) { // 遍历所有class为"single"的元素
                single.checked = !single.checked; // 将当前元素的选中状态取反
            }
        }

        // 取消其他复选框的选中状态
        function uncheckOtherCheckboxes() {
            let checkboxes = document.querySelectorAll('input[type="checkbox"]'); // 获取所有类型为"checkbox"的输入元素
            for (let checkbox of checkboxes) { // 遍历所有类型为"checkbox"的输入元素
                if (checkbox !== event.target) { // 如果当前元素不是触发事件的元素
                    checkbox.checked = false; // 将当前元素设置为未选中状态
                }
            }
        }


        //10.增加
        function addUser() {
            location.href="addUser.jsp";
        }



    </script>
    <style>
        body {
            font-family: Arial, sans-serif;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            table-layout: fixed;
        }

        td, th {
            padding: 8px;
            text-align: center;
            border-bottom: 1px solid #ddd;
            border-right: 1px solid #ddd;
        }

        th {
            background-color: #f2f2f2;
        }

        input[type="checkbox"] {
            cursor: pointer;
        }

        a {
            text-decoration: none;
            color: blue;
        }

        a:hover {
            text-decoration: underline;
        }

        .edit-btn {
            background-color: #4CAF50;
            border: none;
            color: white;
            padding: 5px 10px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 14px;
            margin: 4px 2px;
            cursor: pointer;
            border-radius: 4px;
        }

        .delete-btn {
            background-color: #f44336;
            border: none;
            color: white;
            padding: 5px 10px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 14px;
            margin: 4px 2px;
            cursor: pointer;
            border-radius: 4px;
        }

    </style>
</head>

<body>
<!-- 模态框 -->
<div id="addEditUserModal" class="modal">
    <div class="modal-content">
        <span class="close">&times</span>
        <form id="userForm">
            <input type="hidden" id="userId" name="userId">
            <label for="username">用户名:</label>
            <input type="text" id="username" name="username">
            <!-- 其他表单字段 -->
            <button onclick="saveUser()">保存</button>
        </form>
    </div>
</div>
<input type="text" placeholder="请输入搜索内容" style="width: 150px;height: 30px;" id="inputSelect">
<select id="option" style="width: 100px;height: 30px;">
    <option>用户名</option>
    <option>性别</option>
    <option>爱好</option>
    <option>籍贯</option>
</select>
<input type="button" value="搜索" onclick="$search()" style="width: 80px;height: 30px;">
<input type="button" value="重置" onclick="$reset()" style="width: 80px;height: 30px;"><br/>
<%--<input type="button" value="添加" style="width: 80px;height: 30px;">--%>
<input type="button" value="添加" onclick="addUser()" style="width: 80px;height: 30px;">

<input type="button" value="删除选中" onclick="$deleteChecked()" style="width: 100px;height: 30px;">
<input type="button" value="返回上一页" onclick="$goBack()" style="width: 100px;height: 30px;">

<table cellspacing="0" cellpadding="10">
    <tr>
        <th>
            <input type="checkbox" onclick="selectAll()">全选
            <input type="checkbox" onclick="selectNo()">全不选
            <input type="checkbox" onclick="invertSelect()">反选

        </th>
        <th>id</th>
        <th>用户名</th>
        <th>密码</th>
        <th>性别</th>
        <th>爱好</th>
        <th>籍贯</th>
        <th>操作</th>
    </tr>
    <c:forEach items="${list}" var="user">
        <tr>
            <td><input type="checkbox" name="${user.id}" class="single"></td>
            <td class="add">${user.id}</td>
            <td class="add">${user.username}</td>
            <td class="add">${user.password}</td>
            <td class="add">${user.sex}</td>
            <td class="add">${user.hobbiesStr}</td>
            <td class="add">${user.nativePlace}</td>
            <td>
                    <%--<a href="#" class="edit-btn" onclick="editUser(${user.id});return false;">编辑</a>--%>
                        <a href="#" class="edit-btn" id="${user.id}">编辑</a>
                        <a href="#" onclick="deleteUser(${user.id})" class="delete-btn">删除</a>
            </td>
        </tr>
    </c:forEach>
</table>
</body>
</html>
